<template>
  <div id="createFleet">
    <div class="create-box">
      <span>创建Fleet</span>
      <input ref="uploadInput" type="file" id="upload_file" name="upload_file" accept=".json" @change="fileChange" />
      <el-button class="btn button" @click="loadData">导入</el-button>
      <span class="back return" @click="goback">&lt;返回</span>
    </div>
    <buildFleet :data="formData" ref="buildFleetRef"></buildFleet>
  </div>
</template>
<style lang="scss" scoped>
  #createFleet {
    background-color: $blank-color;
    .create-box {
      height: 60px;
      width: calc(100% - 200px);
      position: absolute;
      top: 50px;
      left: 200px;
      background-color: $blank-color;
      color: $text-color;
      display: flex;
      align-items: center;
      z-index: 1;
      span {
        font-size: 16px;
        font-weight: bold;
        margin-left: 20px;
        margin-right: 21px;
        line-height: 60px;
      }
      #upload_file {
        display: none;
      }
      .button {
        width: 100px;
        height: 28px;
      }
      .return {
        font-size: 14px;
      }
    }
  }
</style>
<script lang="ts" setup>
  import { ref } from 'vue'
  import buildFleet from './buildFleet.vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import UserService from '@/api/userService'
  const router = useRouter()
  const uploadInput = ref<HTMLElement | null>(null)
  let formData = ref('')
  const buildFleetRef = ref(null)
  const goback = () => {
    router.push({ name: 'runningState' })
  }
  let form = {
    name: '',
    build_id: '',
    runtime_configuration: {
      process_configurations: [{}]
    },
    inbound_permissions: [{}],
    instance_tags: [{ key: '', value: '' }],
    description: '',
    region: '',
    bandwidth: '',
    server_session_protection_policy: '',
    server_session_protection_time_limit_minutes: '',
    resource_creation_limit_policy: Object(),
    vpc_id: '',
    enterprise_project_id: '',
    public_ip: {
      ip_type: '',
      bandwidth: {
        share_type: '',
        size: '',
        charging_mode: 'traffic',
        id: ''
      }
    }
  } as { [key: string]: any }
  const fileChange = (e: Event) => {
    const input = e.target as HTMLInputElement
    let files = input.files
    if (files) {
      if (!files[0].type.includes('json')) {
        ElMessage({
          message: '请上传json文件！',
          type: 'error'
        })
        return
      }
      if (localStorage.getItem('fleetForm')) {
        let obj = JSON.parse(localStorage.getItem('fleetForm') as string)
        formatForm(obj)
      }
      let reader = new FileReader()
      reader.readAsText(files[0], 'utf-8')
      reader.onload = () => {
        let res = reader.result as string
        let obj = JSON.parse(res)
        if (Object.keys(obj).length) {
          formatForm(obj)
        }
        formData.value = JSON.stringify(form)
      }
    }
    ;(e.target as HTMLInputElement).value = ''
    ;(buildFleetRef.value! as any).getForm()
  }
  const getRegion = async () => {
    let res = await UserService.getRegion()
    let regionArr = res.data.regions
    if (regionArr.length) {
      form.region = regionArr[0]
    }
  }
  getRegion()
  const formatForm = (obj: any) => {
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        const element = obj[key]
        form[key] = element
      }
    }
  }
  const loadData = () => {
    let oBtn = uploadInput.value as HTMLInputElement
    oBtn.click()
  }
</script>
